<template>
  <el-dialog width="70%" title="热销详情" :visible.sync="open">
    <div class="brandDetail_main">
      <el-card class="search-main card" shadow="never">
        <div slot="header">
          <span>条件查询</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="4" :offset="0">
            <el-input
              v-model="search.name"
              class="search-input"
              size="mini"
              placeholder="商品名称/模糊查询"
            />
          </el-col>
          <el-col :span="4" :offset="0">
            <el-input
              v-model="search.productSn"
              class="search-input"
              size="mini"
              placeholder="商品货号"
            />
          </el-col>
          <el-col :span="4" :offset="0">
            <el-select
              v-model="search.brandId"
              class="search-input"
              size="mini"
              clearable
              placeholder="品牌"
            >
              <el-option
                v-for="item in brandList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-select
              v-model="search.publishStatus"
              class="search-input"
              size="mini"
              clearable
              placeholder="上架状态"
            >
              <el-option label="上架" value="1" />
              <el-option label="未上架" value="0" />
            </el-select>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-select
              v-model="search.verifyStatus"
              class="search-input"
              size="mini"
              clearable
              placeholder="审核状态"
            >
              <el-option label="审核" value="1" />
              <el-option label="未审核" value="0" />
            </el-select>
          </el-col>
          <el-col :span="4" :offset="0">
            <el-button
              type="default"
              size="mini"
              @click="doReset"
            >重置
            </el-button>
            <el-button
              type="primary"
              size="mini"
              @click="doSearch"
            >搜索</el-button>
          </el-col>
        </el-row>
      </el-card>
      <!-- 商品列表 -->
      <el-card class="card table_main" shadow="never">
        <div slot="header">商品列表</div>
        <!-- 商品列表 -->
        <el-table
          ref="productTable"
          v-loading="loading"
          :data="productList"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="index" label="序号" fixed="left" />
          <el-table-column type="selection" width="55" />
          <!-- 商品列表内容 -->
          <el-table-column label="商品图片" align="center" width="150">
            <template slot-scope="scope">
              <!-- <router-link></router-link> -->
              <img :src="scope.row.pic" class="table_img">
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品名称" width="350">
            <template slot-scope="scope">
              <p>{{ scope.row.name }}</p>
              <p>
                品牌: {{ scope.row.brandName }} | {{ scope.row.brandEname }}
              </p>
              <p>{{ scope.row.description }}</p>
            </template>
          </el-table-column>
          <el-table-column label="排序" :width="200">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.sort"
                size="mini"
                placeholder="排序"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品价格" width="150">
            <template slot-scope="scope">
              <p>原价: {{ scope.row.originalPrice | money }}</p>
              <p>现价: {{ scope.row.price | money }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productCategoryName"
            label="商品类别"
            width="150"
          />
          <!-- <el-table-column
            align="center"
            prop="keywords"
            label="关键词"
            width="150"
          /> -->
          <el-table-column
            align="center"
            prop="weight"
            label="重量"
            width="180"
          />
        </el-table>

        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="open = false">取 消</el-button>
        <el-button
          size="mini"
          :loading="couldNext"
          type="primary"
          @click="onSubmit"
        >确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import mixin from '@/mixins/index'
import marketApi from '@/api/market/index'
import productApi from '@/api/product/index'
import brandApi from '@/api/brand/index'

export default {
    name: 'AdsDetail',
    mixins: [mixin],
    data() {
        return {
            loading: false,
            search: {
                productSn: '',
                publishStatus: '',
                verifyStatus: '',
                name: ''
            }, // 搜索form
            couldNext: false, // 是否可以下一步
            productList: [], // 商品列表
            brandList: [], // 商标列表
            selectProduct: [], // 选中的商品列表
            open: false
        }
    },
    created() {
        this.getBrandList()
        this.getProductList()
    },
    methods: {
        handleSelectionChange(val) {
            this.selectProduct = val
            // this.$refs.productTable.toggleRowSelection(val) // 单选
        },
        // 获取品牌列表
        getBrandList() {
            brandApi
                .brandList()
                .then((res) => {
                    this.brandList = res.data.items
                })
                .catch((rej) => {
                    console.log('error', rej)
                })
        },
        // 获取商品列表
        getProductList() {
            const sendSearch = {}
            for (const key in this.search) {
                // 如果搜索框有的内容
                if (this.search[key]) {
                    console.log('searhc==', this.search[key])
                    sendSearch[key] = this.search[key]
                }
            }
            this.loading = true
            //   get数组传参， 第一个是页数，第二个是每页显示几个
            productApi
                .productList(this.page.currentPage, this.page.size, {
                    ...sendSearch
                })
                .then((res) => {
                    // sort改为默认0
                    res.data.rows.forEach((el) => {
                        this.productList.push({
                            ...el,
                            sort: ''
                        })
                    })

                    this.page.total = res.data.total
                    this.loading = false
                })
                .catch((rej) => {
                    console.log(rej)
                    this.loading = false
                })
        },
        openDetail() {
            this.open = true
        },
        doReset() {
            this.search = this.$options.data().search
        },
        // 搜索按钮
        doSearch() {
            this.page.currentPage = 1
            this.getProductList()
        },
        onSubmit() {
            this.$confirm(`是否确认新增最热推荐商品?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.couldNext = true
                    // 填写确定后的业务逻辑
                    console.log(this.selectProduct)
                    const recommendProducts = this.selectProduct.map(item => {
                        return { sort: item.sort, productId: item.id }
                    })

                    marketApi.addMarkProduct({
                        recommendProducts
                    }).then(res => {
                        if (res.success) {
                            this.$emit('success')
                            this.couldNext = false
                        } else {
                            this.$message.error('添加失败')
                            this.couldNext = false
                        }
                    })
                })
                .catch((rej) => {
                    console.log('quxiao')
                })
        },
        // 分页处理
        handleSizeChange(val) {
            this.page.size = val
            this.page.currentPage = 1
            this.getProductList()
        },
        // 页面切换钩子
        handleCurrentChange(val) {
            this.page.currentPage = val
            this.getProductList()
        }
    }
}
</script>

<style lang="scss" scoped>
.brandDetail_main {
  position: relative;
  height: 650px;
  overflow: auto;
  // background-color: red;

  .card {
    margin: 30px;
  }
  .table_img {
    width: 50px;
    height: 50px;
  }
}
</style>
